{% extends "index.html" %}
{% block content %}
<div id="containers">
    <div class="col-lg-12 main-div">
        <legend class="legend"><span>Containers </span> <span
                class="glyphicon glyphicon-refresh spinning loader"></span>
            <button class="btn pull-right mgright-5 refreshContainers" href="#" id="refreshContainers" style="display:none">
                <span class="icon-cw-1 btn-default"> </span> Refresh List
            </button>
            <button class="btn btn-default btn-xs btn-rounded-corners rawJSONContainers" href="#" style="display:none">
                JSON
            </button>
        </legend>
        <div>
            <div class="form-group">
                <button class="btn btn-default btn-start_container" id="buttonStart" disabled>
                    <span class="glyphicon glyphicon-play"> </span> Start
                </button>
                <button class="btn btn-default btn-stop_container" id="buttonStop" disabled>
                    <span class="glyphicon glyphicon-stop"> </span> Stop
                </button>
                <button class="btn btn-default btn-restart_container" id="buttonRestart" disabled>
                    <!--<span class="glyphicon glyphicon-repeat"> </span> Restart-->
                    <span class="glyphicon glyphicon-repeat"> </span> Restart
                </button>
                <button class="btn btn-default btn-delete_container" id="buttonDelete" disabled>
                    <span class="glyphicon glyphicon-remove-sign"> </span> Delete
                </button>
                <button class="btn btn-default btn-freeze_container" id="buttonFreeze" disabled>
                    <span class="glyphicon glyphicon-ok-circle"> </span> Freeze
                </button>
                <button class="btn btn-default btn-unfreeze_container" id="buttonUnfreeze" disabled>
                    <span class="glyphicon glyphicon-remove-circle"> </span> Unfreeze
                </button>
                <!--- right -->
                <a class="btn btn-success pull-right" id="buttonNewInstance">
                    <span class="glyphicon glyphicon-plus-sign"> </span>
                    New Instance
                </a>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <table class="table table-bordered" id="tableContainers">
            <thead>
            <th><input id="selectAllContainers" type="checkbox"/></th>
            <th>Name</th>
            <th>Status</th>
            <th>IP Address</th>
            <th>Type</th>
            <th>OS image</th>
            <!--<th>Created On</th>-->
            <th>Actions</th>
            </thead>
            <tbody>
            {% for container in containers %}
            <tr id="{{container.name}}">
                <td></td>
                <td class="td-width"><a href="containers/{{container.name}}" href="#">{{container.name}}</a></td>
                <td class="status">
                    {% if container.status == 'Running' %}
                    <i class="glyphicon glyphicon-off green"></i>
                    {% elif container.status == 'Stopped' %}
                    <i class="glyphicon glyphicon-off red"></i>
                    {% elif container.status == 'Frozen' %}
                     <i class="glyphicon glyphicon-off blue"></i>
                    {% endif %}
                    {{container.status}}
                </td>
                <td>{{container.ip}}</td>
                {% if container.ephemeral %}
                <td>Ephemeral</td>
                {% else %}
                <td>Persistent</td>
                {% endif %}
                <td>{{container.image}}</td>
                <!--<td>{{container.created_at}}</td>-->
                <td class="td-width-action text-center">
                    <div class="dropdown action-dropdown">
                        <button id="dLabel-{{container.name}}" type="button" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                            <i id="option-icon" class="glyphicon glyphicon-option-vertical"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dLabel">
                            <li>
                                <a id="terminalContainer"
                                   onClick="$.proxy(App.containers.showTerminalContainer('{{container.name}}'));"
                                   title="Terminal to this Container">
                                    <i class="glyphicon glyphicon-console"></i> Terminal</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a id="snapshotContainer"
                                   onClick="$.proxy(App.containers.showSnapshotContainer('{{container.name}}'));"
                                   title="Snapshot from Container">
                                    <i class="glyphicon glyphicon-camera"></i>Snapshot</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a id="cloneContainer"
                                   onClick="$.proxy(App.containers.showCloneContainer('{{container.name}}'));"
                                   title="Clone Container">
                                    <i class="glyphicon glyphicon-duplicate"></i>Clone</a>
                            </li>
                            <li>
                                <a id="moveContainer"
                                   onClick="$.proxy(App.containers.showMoveContainer('{{container.name}}'));"
                                   title="Move Container">
                                    <i class="glyphicon glyphicon-share"></i> Move</a>
                            </li>
                            <li>
                                <a id="exportContainer"
                                   onClick="$.proxy(App.containers.showExportContainer('{{container.name}}'));"
                                   title="Export Image from Container">
                                    <i class="glyphicon glyphicon-export"></i>Export
                                </a>
                            </li>

                        </ul>
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="createContainerForm" style="display:none;">
    <div class="col-lg-12 main-div">
        <legend class="legend"><span>Containers </span> <span
                class="glyphicon glyphicon-refresh spinning loader"></span></legend>
        <div>
            <div class="form-group">
                <button class="btn btn-defult" id="buttonBack">
                    <span class="glyphicon glyphicon-chevron-left"> </span> Back
                </button>
            </div>
        </div>
    </div>

    <div class="col-lg-12">

        <!-- end form normal from images -->
        <form id="newContainerForm">
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-md-2 control-label" for="containerImage">Select image:</label>
                    <div class="col-md-5">
                        <select class="form-control" id="containerImage" name="image">
                            {% for image in images %}
                                {% if image.properties.get('description') == None %}
                                    <option value="{{image.fingerprint}}">{{image.aliases[0].name if image.aliases[0] else 'N/A'}}</option>
                                {% else %}
                                    <option value="{{image.fingerprint}}">{{image.properties.description if image.properties.description else 'N/A'}}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Container Name</label>
                        <!--<label class="col-sm-2 control-label"></label>-->
                        <label class="col-sm-2 form-check-label text-center">Persistent</label>
                        <label class="col-sm-2 form-check-label text-center">Autostart</label>
                        <div class="clearfix"></div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="containerName" aria-describedby="name"
                                   placeholder="Enter container name" name="name">
                        </div>
                        <!--<div class="col-sm-2"></div>-->
                        <div class="col-sm-2 text-center">
                            <input type="checkbox" class="form-check-input" id="containerStateful" name="stateful"
                                   checked value="true">
                        </div>
                        <div class="col-sm-2 text-center">
                            <input type="checkbox" class="form-check-input" id="containerAutostart" name="autostart"
                                   checked value="true">
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="containerCPUPercentage">CPU allocation (%):</label>
                        <div class="col-sm-3">
                            <input type="range" class="form-control" id="cpu_percentage" min="5" max="100" value="100"
                                   step="5">
                        </div>
                        <div class="col-md-2">
                            <input type="number" class="form-control" id="containerCPUPercentage" name="cpu[percentage]"
                                   min="5" max="100" value="100">
                        </div>
                        <div class="col-md-2">
                            <label class="form-check-label control-label" for="containerCPUHardLimit">Hard Limit</label>
                            <input type="checkbox" class="form-check-input" id="containerCPUHardLimit"
                                   name="cpu[hardLimitation]" value="true">
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Memory usage in MB:</label>
                        <div class="col-sm-3">
                            <input type="range" class="form-control" id="memory_percentage" min="5" max="{{memory}}"
                                   value="100" step="5">
                        </div>
                        <div class="col-sm-2">
                            <input type="number" class="form-control" id="containerMemoryPercentage"
                                   name="memory[sizeInMB]"
                                   min="32" max="{{memory}}" value="32">
                            (Max: {{memory}} MB)
                        </div>
                        <div class="col-sm-2">
                            <label class="form-check-label control-label" for="containerMemoryHardLimit">Hard
                                Limit</label>
                            <input type="checkbox" class="form-check-input" id="containerMemoryHardLimit"
                                   name="memory[hardLimitation]" value="true">
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="containerProfiles">Profiles:</label>
                        <div class="col-sm-3">
                            <select class="selectpicker" multiple id="containerProfiles" name="profiles">
                                {% for profile in profiles %}
                                <option>{{profile.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="panel-body advanced-settings-accordion">
                    <div class="panel-group" id="accordion">
                        <div class="panel-default">
                            <div class="">
                                <h4 class="">
                                    <a data-toggle="collapse" class="collapse-acc" data-parent="#accordion" href="#collapse1">Advanced
                                        Settings</a>
                                </h4>
                            </div>
                            <div id="collapse1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="col-lg-12 col-sm-12 col-xs-12" id="advancedSettingsContainer">
                                        <div class="row">
                                            <div class="col-lg-1"></div>
                                            <div class="col-lg-5">
                                                <div class="row"><label for="Key">Key</label></div>
                                            </div>
                                            <div class="col-lg-1"></div>
                                            <div class="col-lg-5">
                                                <div class="row"><label for="Value">Value</label></div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form inline col-md-12 mgtop-10">
                    <div class="row">
                        <button type="submit" class="btn btn-primary">Create <span
                                class="glyphicon glyphicon-refresh spinning loader"></span></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="snapshotList" hidden>
    <h4 id="selectedSnapshotList">List of Snapshots - </h4>
</div>

<!-- Modal -->
<div class="modal fade" id="cloneContainerModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <form id="cloneForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="newContainerClone" class="col-sm-3 control-label">Clone Name</label>
                        <div class="col-sm-8">
                            <input id="newContainerClone" name="newContainer" class="form-control" type="text"
                                   placeholder="Clone Name" title="Clone Name" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-inline col-md-offset-3 col-md-3 mgtop-10">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" id="buttonCloneContainer" class="btn btn-primary">Clone Container <span
                        class="glyphicon glyphicon-refresh spinning loader"></span></button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="moveContainerModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <form id="moveForm" class="form-horizontal">
                        <div class="form-group">
                            <label for="newContainerMove" class="col-sm-3 control-label">Move Container Name</label>
                            <div class="col-sm-8">
                                <input id="newContainerMove" name="newContainer" class="form-control" type="text"
                                       placeholder="Move Container Name" title="Move Container Name" required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-inline col-md-offset-3 col-md-3 mgtop-10">
                            </div>
                        </div>
                    </form>
            </div>
            <div class="modal-footer">
                <button type="submit" id="buttonMoveContainer" class="btn btn-primary">Move Container <span
                    class="glyphicon glyphicon-refresh spinning loader"></span></button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exportContainerModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <form id="exportForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="imageAlias" class="col-sm-3 control-label">Image Alias</label>
                        <div class="col-sm-8">
                            <input id="imageAlias" name="imageAlias" class="form-control" type="text"
                                   placeholder="Image Alias" title="Image Alias" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-inline col-md-offset-3 col-md-3 mgtop-10">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="buttonExportContainer" class="btn btn-primary">Export Container <span
                        class="glyphicon glyphicon-refresh spinning loader"></span></button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="snapshotContainerModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <form id="snapshotForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="snapshotName" class="col-sm-3 control-label">Snapshot Name</label>
                        <div class="col-sm-8">
                            <input id="snapshotName" name="snapshotName" class="form-control" type="text"
                                   placeholder="Snapshot Name" title="Snapshot Name" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="snapshotStateful2" class="col-sm-3 control-label">Stateful</label>
                        <input type="checkbox" class="form-check-input" id="snapshotStateful2" name="stateful">
                    </div>
                    <div class="form-group">
                        <div class="form-inline col-md-offset-3 col-md-3 mgtop-10">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" id="buttonSnapshotContainer" class="btn btn-primary">Snapshot <span
                        class="glyphicon glyphicon-refresh spinning loader"></span></button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

</div>
{% endblock %}

<!-- Default form contact -->